<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/detail.min.css">
</head>

<body>
    <div class="web">
        <!-- 订单页 -->
        <div class="product">
            <!-- 头部标题 -->
            <div class="product-header">
                <img src="./img/detail/left.png" alt="">
                <img src="./img/detail/logo.png.png" alt="">
                <img src="./img/detail/more.png" alt="">
            </div>
            <div class="product-content">
                <img src="./img/detail/flower.png" alt="">
                <div class="pice">
                    <p>浪漫满屋</p>
                    <div class="pice-txt">
                        <p>￥229 <span>￥289</span></p>
                        <span>已售17229笔</span>
                    </div>
                </div>
                <ul>
                    <li>
                        <span>材料</span>
                        <span>19枝红玫瑰，火龙珠，银叶菊绿叶搭配</span>
                    </li>
                    <li>
                        <span>包装</span>
                        <span>黑色韩式包装</span>
                    </li>
                    <li>
                        <span>配送</span>
                        <span>全国送货上门，市区免运费</span>
                    </li>
                    <li>
                        <span>附送</span>
                        <span>下单填写留言，免费赠送贺卡</span>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 数量选择 -->
        <div class="number">
            <span>数量</span>
            <div class="one">1</div>
        </div>
        <!-- 订单评价 -->
        <div class="evaluate">
            <div class="top-line">
                <span>订单评价</span>
                <span>最近已有1330条评论</span>

            </div>

            <ul>
                <li>
                    <div class="user">
                        <img src="./img/detail/user.png" alt="">
                        <p><span>147****2479</span> <img src="./img/detail/collect.png" alt=""></p>
                    </div>
                    <div class="txt">
                        <p>一大束玫瑰花，老婆非常喜欢。花也很新鲜，推荐大家买</p>
                        <img src="./img/detail/flower02.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="user">
                        <img src="./img/detail/user.png" alt="">
                        <p><span>181****2931</span> <img src="./img/detail/collect.png" alt=""></p>
                    </div>
                    <div class="txt">
                        <p>鲜花收到了。物流很快，当天就送到了。鲜花太漂亮了，颜色正，包装精美，闺蜜过生日。送给她很喜欢，物美价廉很满意的一次购物。</p>
                        <img src="./img/flower03.png" alt="">
                    </div>
                </li>
            </ul>
            <button>查看更多评价</button>
        </div>
        <!-- 订单详情 -->
        <div class="detail">
            <p>产品详情</p>
            <img src="./img/detail/detail.png" alt="">
            <img src="./img/detail/information.png" alt="">
            <img src="./img/detail/greeting.png" alt="">
        </div>
        <div class="back"></div>
        <!-- 结算按钮页 -->
        <footer>
            <div class="left">
                <a href="#"><img src="./img/detail/home.png" alt=""> <br><span>首页</span></a>
                <a href="#"><img src="./img/detail/shopping.png" alt=""><br><span>电话</span></a>
                <a href="#"><img src="./img/detail/shopping.png" alt=""><br><span>购物车</span></a>
            </div>
            <div class="right">
                <button>加入购物车</button>
                <button>立即购买</button>
            </div>
        </footer>
    </div>

</body>

</html>